<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
          <searchBox title="消息管理" :btn="btn" @func="showBtn" />

          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-row class="type">
              <el-col span="3">
                <el-select
                  v-model="queryParams.receiveId"
                  placeholder="选择通告范围"
                  class=""
                >
                  <el-option
                    v-for="item in type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col span="1">
                <el-button @click="handleLoadAndQuery()">查询</el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column
                label="播放顺序"
                align="left"
                prop="msgOrder"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="标题"
                align="left"
                prop="msgTitle"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="通告内容" align="left" prop="msg" />
              <el-table-column
                label="通告范围"
                align="left"
                prop="receiveId"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.receiveId === 1">全院</span>
                  <span v-if="scope.row.receiveId === 2">外科</span>
                  <span v-if="scope.row.receiveId === 3">内科</span>
                </template>
              </el-table-column>
              <el-table-column
                label="创建人"
                align="left"
                prop="createName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="创建时间"
                align="left"
                prop="createTime"
              />
              <el-table-column
                label="操作"
                align="left"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click.native="handleEdit(scope.row)"
                    >编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click.native="handleDelete(scope.row)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="handleLoadAndQuery"
          />
        </el-card>
      </el-row>
    </div>
    <el-drawer :title="title" :visible.sync="isVisibleAdd" size="65%">
      <addInform @close="handleCloseAdd" ref="editRef" />
    </el-drawer>
  </div>
</template>

<script>
import addInform from "@/views/message/components/addInform";
import {
  listNotifyMsg,
  getNotifyMsg,
  addNotifyMsg,
  updateNotifyMsg,
  delNotifyMsg
} from "@/api/business/notifyMsg";

export default {
  name: "inform",
  components: {
    addInform
  },
  data() {
    return {
      btn: {
        add: true,
        reg: false,
        down: false,
        export: false,
        imp: false,
        search: true,
        box: false
      },
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      checkList: [],
      loading: false,
      redirect: undefined,
      type: [
        {
          value: "1",
          label: "全院"
        },
        {
          value: "2",
          label: "外科"
        },
        {
          value: "3",
          label: "内科"
        }
      ],
      value: "",
      isVisibleAdd: false,
      editData: null,
      title: "新增通知"
    };
  },
  watch: {},
  created() {
    this.handleLoadAndQuery();
  },
  methods: {
    handleLoadAndQuery() {
      this.loading = true;
      this.checkList = [];
      listNotifyMsg(this.queryParams).then(response => {
        this.checkList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleEdit(row) {
      this.title = "编辑";
      this.isVisibleAdd = true;
      this.$refs.editRef.handleOpen(row);
    },
    handleDelete(row) {
      delNotifyMsg(row.id).then(res => {
        this.handleLoadAndQuery();
      });
    },
    showBtn(data) {
      if (data == "add") {
        this.isVisibleAdd = true;
        this.$refs.editRef.handleOpenAdd();
      }
      if (data === "search") {
        this.handleLoadAndQuery();
      }
    },
    showRegister(data) {
      this.isVisibleAdd = data;
    },
    handleCloseAdd() {
      this.isVisibleAdd = false;
      this.editData = null;
      this.handleLoadAndQuery();
    }
  }
};
</script>
